<template>
  <div id="PermissionManage">
    <Breadcrumb :content="content"></Breadcrumb>
    <div class="center">
      <Splitpanes style="height: 100%">
        <!-- 角色 -->
        <Pane size="20" style="border: 1px solid #ccc">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="toolbartitle">角色</div>
              <vxe-input clearable placeholder="关键字查询"></vxe-input>
              <vxe-button
                type="text"
                status="primary"
                icon="vxe-icon-refresh"
                content="刷新"
              ></vxe-button>
              <vxe-button
                type="text"
                status="success"
                icon="vxe-icon-square-plus"
                content="新建"
              ></vxe-button>
              <vxe-button
                type="text"
                icon="vxe-icon-save"
                content="保存"
                class="text-cyan"
              ></vxe-button>
              <vxe-button
                type="text"
                status="danger"
                icon="vxe-icon-delete"
                content="删除"
              ></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="PermissionTable">
            <vxe-table
              border
              ref="PermissionTable"
              :row-config="{ isCurrent: true, isHover: true }"
              :data="tableData"
              @checkbox-change="selectChangeEvent"
              @current-change="roleRowClick"
              :column-config="{ resizable: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
            >
              <vxe-column type="checkbox" width="30"></vxe-column>
              <vxe-column type="seq" title="序号" width="30"></vxe-column>
              <vxe-column
                field="name"
                title="名称"
                width="120"
                :edit-render="{ autofocus: '.vxe-input--inner' }"
              >
                <template #edit="{ row }">
                  <vxe-input v-model="row.name" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="open" title="是否公开">
                <template #default="{ row }">
                  <vxe-checkbox v-model="row.open"></vxe-checkbox>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="15" style="border: 1px solid #ccc">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="toolbartitle">模块</div>
            </template>
          </vxe-toolbar>
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input clearable placeholder="关键字查询"></vxe-input>
              <vxe-button
                type="text"
                status="primary"
                icon="vxe-icon-refresh"
                content="刷新"
              ></vxe-button>
              <vxe-button
                type="text"
                icon="vxe-icon-save"
                class="text-cyan"
                content="保存"
              ></vxe-button>
            </template>
          </vxe-toolbar>
          <el-tree :data="moduledata" show-checkbox node-key="id" :props="defaultProps" />
        </Pane>
        <!-- 权限菜单 -->
        <Pane style="border: 1px solid #ccc" size="20">
          <Splitpanes horizontal>
            <Pane size="50" style="border: 1px solid #ccc">
              <vxe-toolbar perfect>
                <template #buttons>
                  <div class="toolbartitle">菜单分配</div>
                </template>
              </vxe-toolbar>
              <el-tree :data="menudata" show-checkbox node-key="id" :props="defaultProps" />
            </Pane>
            <Pane size="50" style="border: 1px solid #ccc">
              <vxe-toolbar perfect>
                <template #buttons>
                  <div class="toolbartitle">功能分配</div>
                </template>
              </vxe-toolbar>
              <el-tree :data="permissiondata" show-checkbox node-key="id" :props="defaultProps" />
            </Pane>
          </Splitpanes>
        </Pane>
        <Pane style="border: 1px solid #ccc" size="45">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="toolbartitle">权限详情</div>
            </template>
          </vxe-toolbar>
          <el-tree
            :data="permissiondata"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[1, 2, 3, 4, 5]"
            :default-checked-keys="[1, 2, 3, 4, 5]"
          />
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 公共组件标题
const content = ref('角色权限');
import { ref, reactive, getCurrentInstance } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import Breadcrumb from '@/components/Breadcrumb.vue';
import 'splitpanes/dist/splitpanes.css';
import { VXETable } from 'vxe-table';

let { proxy }: any = getCurrentInstance();
// 表格数据
const tableData = ref([
  { id: 10001, name: 'admin', open: true },
  { id: 10002, name: '管理员', open: true },
  { id: 10003, name: '护士', open: true },
  { id: 10004, name: '检验科', open: true },
  { id: 10005, name: '科室主任', open: true },
  { id: 10006, name: '医生', open: true },
  { id: 10007, name: '医务科', open: true },
  { id: 10008, name: '院感', open: true }
]);

// 模块树形结构数据
const moduledata = ref([
  {
    id: 1,
    label: '检验模块',
    children: [
      {
        id: 4,
        label: '病区医生模版'
      },
      {
        id: 4,
        label: '用户管理'
      },
      {
        id: 4,
        label: '角色管理'
      },
      {
        id: 4,
        label: '功能模块'
      },
      {
        id: 4,
        label: '资源类型'
      },
      {
        id: 4,
        label: '分组管理'
      },
      {
        id: 4,
        label: '系统功能'
      },
      {
        id: 4,
        label: '规则管理'
      },
      {
        id: 4,
        label: '参数模板'
      },
      {
        id: 4,
        label: '角色权限'
      }
    ]
  },
  {
    id: 2,
    label: '微生物模块',
    children: [
      {
        id: 5,
        label: '报表列表'
      },
      {
        id: 6,
        label: '报表设计器'
      }
    ]
  },
  {
    id: 3,
    label: '护士站模块',
    children: [
      {
        id: 7,
        label: '接口设置'
      },
      {
        id: 8,
        label: '接口参数'
      },
      {
        id: 8,
        label: '接口服务'
      },
      {
        id: 8,
        label: '业务临时表'
      }
    ]
  }
]);

//菜单权限树形结构数据
const menudata = ref([
  {
    id: 1,
    key: '1',
    label: '系统设置',
    children: [
      {
        id: 4,
        label: '系统设置'
      },
      {
        id: 4,
        label: '用户管理'
      },
      {
        id: 4,
        label: '角色管理'
      },
      {
        id: 4,
        label: '功能模块'
      },
      {
        id: 4,
        label: '资源类型'
      },
      {
        id: 4,
        label: '分组管理'
      },
      {
        id: 4,
        label: '系统功能'
      },
      {
        id: 4,
        label: '规则管理'
      },
      {
        id: 4,
        label: '参数模板'
      },
      {
        id: 4,
        label: '角色权限'
      }
    ]
  },
  {
    id: 2,
    key: '2',
    label: '报告管理',
    children: [
      {
        id: 4,
        label: '角色管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      },
      {
        id: 3,
        label: '用户管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      }
    ]
  },
  {
    id: 3,
    key: '3',
    label: '接口管理',
    children: [
      {
        id: 4,
        label: '角色管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      },
      {
        id: 4,
        label: '用户管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      }
    ]
  },
  {
    id: 4,
    key: '4',
    label: '接口管理',
    children: [
      {
        id: 4,
        label: '角色管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      },
      {
        id: 4,
        label: '用户管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      }
    ]
  }
]);

// 权限点树形结构数据
const permissiondata = ref([
  {
    id: 1,
    key: '1',
    label: '身份管理',
    children: [
      {
        id: 4,
        label: '角色管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      },
      {
        id: 4,
        label: '用户管理',
        children: [
          {
            id: 4,
            label: '创建'
          },
          {
            id: 4,
            label: '编辑'
          },
          {
            id: 4,
            label: '删除'
          },
          {
            id: 4,
            label: '改变权限'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    key: '2',
    label: '功能管理',
    children: [
      {
        id: 5,
        label: '管理主机特性'
      }
    ]
  },
  {
    id: 3,
    key: '3',
    label: '设置管理',
    children: [
      {
        id: 7,
        label: '发邮件'
      },
      {
        id: 8,
        label: '邮件测试'
      }
    ]
  },
  {
    id: 4,
    key: '4',
    label: '用户权限',
    children: [
      {
        id: 7,
        label: '组织机构权限'
      },
      {
        id: 8,
        label: '组织机构权限管理'
      },
      {
        id: 8,
        label: '权限模型',
        children: [
          {
            id: 8,
            label: '新建权限模型'
          },
          {
            id: 8,
            label: '修改权限模型'
          },
          {
            id: 8,
            label: '删除权限模型'
          }
        ]
      }
    ]
  },
  {
    id: 5,
    key: '5',
    label: 'His',
    children: [
      {
        id: 4,
        label: 'ICD',
        children: [
          {
            id: 8,
            label: '新建'
          },
          {
            id: 8,
            label: '修改'
          },
          {
            id: 8,
            label: '删除'
          }
        ]
      },
      {
        id: 4,
        label: 'ICDGroup',
        children: [
          {
            id: 8,
            label: '新建'
          },
          {
            id: 8,
            label: '修改'
          },
          {
            id: 8,
            label: '删除'
          }
        ]
      },
      {
        id: 4,
        label: 'Diangnosis',
        children: [
          {
            id: 8,
            label: '新建'
          },
          {
            id: 8,
            label: '修改'
          },
          {
            id: 8,
            label: '删除'
          }
        ]
      },
      {
        id: 4,
        label: 'Diangnosis Type',
        children: [
          {
            id: 8,
            label: '新建'
          },
          {
            id: 8,
            label: '修改'
          },
          {
            id: 8,
            label: '删除'
          }
        ]
      }
    ]
  }
]);

// 表格复选框发生变化时触发的事件
const selectChangeEvent = ({ records }) => {
  console.log('勾选当前行', records);
};
// 选中当前行
const roleRowClick = ({ row }) => {
  console.log('选中当前行', row);
};
</script>
<style lang="scss">
#PermissionManage {
  height: 100%;
  background-color: #fff;
  .center {
    height: calc(100% - 40px - 40px);
    padding: 10px;
    .text-cyan {
      color: #1cbbb4;
    }
    .toolbartitle {
      font-weight: 700;
      margin-right: 30px;
    }
  }

  // .splitpanes {
  //   background-color: #f8f8f8;
  // }

  // .splitpanes__splitter {
  //   background-color: #ccc;
  //   position: relative;
  // }
  // .splitpanes__splitter:before {
  //   content: '';
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   transition: opacity 0.4s;
  //   background-color: rgba(255, 0, 0, 0.3);
  //   opacity: 0;
  //   z-index: 1;
  // }
  // .splitpanes__splitter:hover:before {
  //   opacity: 1;
  // }
  // .splitpanes--vertical > .splitpanes__splitter:before {
  //   left: -30px;
  //   right: -30px;
  //   height: 100%;
  // }
  // .splitpanes--horizontal > .splitpanes__splitter:before {
  //   top: -30px;
  //   bottom: -30px;
  //   width: 100%;
  // }
  .paneBox {
    width: 100%;
    height: 100%;
    padding: 15px;
    .paneTag {
      margin-left: 30px;
      margin-bottom: 20px;
    }
  }
}
</style>
